<template>
	<coreshop-page title="我的优惠券" mode="left">
		<view>
			<view class="tab-box">
				<view :class="['tab-item', { 'on': state.tabId === item.id }]" v-for="item in state.tabList"
					:key="item.id" @click="handleChangeTab(item)">{{ item.name }}</view>
			</view>

			<view class="content-box p-25" v-if="state.couponList.length > 0">
				<view v-for="item, index in state.couponList" :key="index"
					:class="['coupon-box', { 'gary-box': state.tabId != 'noUsed' }]">
					<view class="card-box">
						<image class="coupon-bg" :src="handleStaticResources('/static/images/coupon-bg.jpg')"></image>
						<view class="coupon-msg">
							<view class="coupon-tit">
								<view class="name">
									<text class="tit">{{ item.couponName }}</text>
								</view>
								<view class="time">
									<text class="tit"> 有效期：{{ timeFormat(item.startTime, 'yyyy-mm-dd') }} 至
										{{ timeFormat(item.endTime, 'yyyy-mm-dd') }}</text>
								</view>
								<view class="rules-mode">
									<view class="use-rules" @click="handleToggleRules(index)">
										<view class="tit">优惠券使用规则</view>
										<uv-icon v-if="item.showRules" name="arrow-up-fill" color="#aaa"
											size="10"></uv-icon>
										<uv-icon v-else name="arrow-down-fill" color="#aaa" size="10"></uv-icon>
									</view>
								</view>
							</view>
							<view class="btn-box">
								<text class="btn-tit" @click="handleRouteSwitchTab(RouteSwitchTabEnum.home)"
									v-if="state.tabId == 'noUsed'">立即使用</text>
								<text class="btn-tit gary" v-if="state.tabId == 'yesUsed'">已使用</text>
								<text class="btn-tit gary" v-if="state.tabId == 'invalid'">已失效</text>
							</view>
						</view>
					</view>
					<view v-show="item.showRules">
						<view class="rules-box">
							<view class="tit">优惠券使用规则：</view>
							<view class="rules" v-for="cell, cellIndex in item.conditions" :key="cellIndex">{{ cell }}
							</view>
						</view>
						<view class="rules-box">
							<view class="tit">优惠券优惠方式：</view>
							<view class="rules" v-for="cell, cellIndex in item.results" :key="cellIndex">{{ cell }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.coupon" text="暂无优惠券"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import { queryUserCoupon } from '@/core/api';
	import { onReachBottom } from '@dcloudio/uni-app';
	import type { Response } from '@/core/models';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { handleStaticResources, handleRouteSwitchTab } from '@/core/utils';
	import { EmptyEnum, RouteSwitchTabEnum } from '@/core/enum';

	interface TabType {
		id : string;
		name : string;
	}

	const state = reactive<{
		tabList : Array<TabType>;
		tabId : string;
		couponList : Array<any>;
		totalPages : number;
		page : number;
		limit : number;
	}>({
		tabList: [
			{
				id: 'noUsed',
				name: "未使用"
			}, {
				id: 'yesUsed',
				name: "已使用"
			}, {
				id: 'invalid',
				name: "已失效"
			}
		],
		tabId: 'noUsed',
		couponList: [],
		totalPages: 1,
		page: 1,
		limit: 10,
	})

	onMounted(() => {
		/** 获取优惠券列表 */
		getUserCoupo()
	});

	/** 获取优惠券列表 */
	const getUserCoupo = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		const userCoupo : Response<{
			count : number;
			list : Array<any>
		}> = await queryUserCoupon({
			display: state.tabId,
			page: state.page,
			limit: state.limit,
		})
		state.totalPages = Math.ceil(userCoupo.data?.count / state.limit);
		state.couponList = state.couponList.concat(userCoupo.data?.list.map((item => {
			item['showRules'] = false;
			return item;
		})));
		uni.hideLoading();
	}

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getUserCoupo();
		}
	})

	const handleChangeTab = (item : TabType) => {
		if (item.id != state.tabId) {
			state.page = 1;
			state.couponList = [];
			state.tabId = item.id;
			getUserCoupo();
		}
	}

	/** 查看使用规则 */
	const handleToggleRules = (index : number) => {
		state.couponList[index].showRules = !state.couponList[index].showRules;
	}
</script>
<style lang="scss" scoped>
	@import './coupon.scss';
</style>